<template lang="html">
  <div class="game-more">
    <action-bar title='更多比赛' :style='{backgroundColor: "#e54f20"}'>
      <template slot='left'>
        <action-button @click='onBack' color='#fff'>
          <i class="iconfont icon-fanhui"></i>
        </action-button>
      </template>
      <template slot='right'>
        <action-button color='transparent'></action-button>
      </template>
    </action-bar>
    <div class="upper">
        <div class="upper_wrap">
            <div class="title">客官不要猴急哦！</div>
            <div class="describe">程序猿哥哥正在<br/>努力开发以下<br/>新功能呢</div>
        </div>
        <img  class="niu" src="../../assets/images/jingqingqidainiu@3x.png"/>
    </div>
    <div class="down">
      <div class="bookmark">
          <div class="bookmark_upper">
              <img src="../../assets/images/bangmangxuangu@3x.png"/>
              <div class="name">帮忙挑股</div>
              <div class="line"></div>
          </div>
          <div class="bookmark_describe">两个股票犹豫不决？让小伙伴来帮你，无上限人群下注，给你参考又陪你玩哦。
          </div>
      </div>
    </div>
    <div class="button" @click='onBack'>开发好了通知我</div>
  </div>
</template>

<script>
import ActionBar from 'components/actionBar'
import ActionButton from 'components/actionBar/ActionButton'
import Constant from 'common/constant'

export default {
  data () {
    return {
      headerOption: {
        title: '更多比赛',
        leftBtn: Constant.leftBtn.BACK,
        operations: []
      },
    }
  },
  components: {
    ActionBar, ActionButton
  },
  methods: {
    onBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="css" scoped>
  .game-more {
    position: fixed;
    top: 44px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f5f5f6;
  }
  .game-more .upper{
    height: 60%;
    min-height: 200px;
    background-image: url(../../assets/images/qidaibeijing@3x.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 8%;
    padding-bottom: 0;
    padding-right: 10%;
  }
  .game-more .upper_wrap{
    margin-top: 8%;
    float: right;
  }
  .game-more .niu{
    width: 40%;
    float: left;
    position: absolute;
    margin-top: 12%;
    margin-left: 10%;
  }
  .game-more .upper .title{
    color: rgba(255,85,0,1);
    font-weight: bold;
    font-size: 2.5rem;
  }
  .game-more .upper .describe{
    font-size: 1.6rem;
    margin-left: 30%;
  }
  .game-more .down{
  }
  .game-more .down .bookmark{
    margin: 16px;
    padding: 10px;
    border: solid 1px #E7E7E7;
    border-radius: 2px;
    text-align: center;
    box-shadow: 5px 1px 10px 2px #ddedf7, -2px 1px 10px 2px #ddedf7;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F5FBFE;
  }
  .game-more .bookmark_upper img{
    margin-top: 10%;
    width: 50%;
  }
  .game-more .bookmark_upper .name{
    color: #449CD8;
    font-size: 1.2rem;
    margin-bottom: 8%;
  }
  .game-more .bookmark_upper .line{
    color: #C9EDFF;
    width: 80%;
    height: 2px;
    margin: 0 auto;
  }
  .game-more .bookmark_describe{
    text-align: left;
    color: #999999;
    font-size: 12px;
  }
  .game-more .button{
    background-color: #FDBB4A;
    font-size: 1.4rem;
    padding: 0.6rem;
    border-radius: 1.2rem;
    text-align: center;
    color: #FEFEFE;
    margin: 5% 10%;
  }
</style>
